import { HashRouter, Routes, Route, useRoutes } from 'react-router-dom'
import { Provider } from "react-redux";
import store from "@/store/index";
import { asyncRoutes } from "@/pages/index";
import Permission from "./Permission";

// 所有路由都可访问 用createRoutes方法
function createRoutes(accessRoutes) {
  let result = []
  accessRoutes.forEach(route => {
    if (route.path && route.element) {
      result.push(
        <Route key={route.key} path={route.path} element={route.element}></Route>
      )
    }
    if (route.children) {
      route.children.forEach(route => {
        result.push(
          <Route key={route.key} path={route.path} element={route.element}></Route>
        )
      })
    }
  })
  return result
}

export default function App() {
  return (
    // 所有路由都可访问 用createRoutes方法
    // <HashRouter>
    //   <Provider store={store}>
    //     <Routes>
    //       {/* 以及路由不需要指定出口 */}
    //       <Route path='/' element={<Layout />}>
    //         {/* 二级路由要指定出口 Outlet (Layout组件中) */}
    //         {
    //           createRoutes(asyncRoutes)
    //         }
    //       </Route>
    //       <Route path="/login" element={<Login />}>登录</Route>
    //       <Route path="/register" element={<Register />}>登录</Route>
    //     </Routes>
    //   </Provider>
    // </HashRouter>

    // 路由权限不同  useRoutes方法
    <HashRouter>
      <Provider store={store}>
        <Permission />
      </Provider>
    </HashRouter>
  );
}
